<template>
  <a-modal
    :visible="visible"
    title="视频预览"
    :bodyStyle="{ padding: 0, backgroundColor: '#000' }"
    width="50vw"
    @cancel="visible = false"
    :footer="null"
  >
    <video
      v-if="visible"
      :src="playUrl"
      style="float: left;width: 50vw; max-height: 70vh;"
      autoplay
      controls="controls"
    />
  </a-modal>
</template>

<script>
// https://hb-saas.obs.cn-south-1.myhuaweicloud.com/obs/20230803/4a22c03ade4245cf8b20eb2d6965834e.mp4
// https://hb-saas.obs.cn-south-1.myhuaweicloud.com/obs/20230803/537e33e84a474fdebad8a4dbad35f89d.mp4
export default {
  data() {
    return {
      visible: false,
      playUrl: ''
    }
  },
  methods: {
    show(url) {
      if (!url) return
      this.playUrl = url
      this.visible = true
    }
  }
}
</script>

<style lang="less" scoped></style>
